<template>
  <!-- 确认订单页面 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      style="height: 65px"
      title="确认订单"
      left-arrow
      @click-left="goSingleCommodity"
    />

    <div class="second">
      <!-- 地址 -->
      <div style="height: 90px">
        <van-row>
          <!-- <van-col span="3" class="col">
          <van-icon name="map-marked" size="30" style="margin: 10px 20px" />
        </van-col> -->

          <van-col span="24" class="col1">
            <van-button
              round
              type="info"
              style="font-size: 18px; margin-top: 20px"
              >暂无地址，去添加</van-button
            ></van-col
          >
        </van-row>
      </div>
      <div style="background-color: #dadce0; height: 4px"></div>

      <!-- 分割线 -->
      <div style="background-color: #f1f3f4"></div>

      <!-- 店铺 -->
      <van-row style="margin-top: 20px">
        <van-col span="24">
          <van-image
            width="30"
            height="30"
            radius="5px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            style="width: 40px; height: 40px; float: left; margin-left: 5%"
          />

          <div style="text-align: left; font-size: 18px; margin-left: 18%">
            969北京顺和店 &nbsp;&nbsp;<van-icon name="arrow" />
          </div>
        </van-col>
      </van-row>
      <!-- <van-card
        style="text-align: left; font-size: 18px"
        num="1"
        price="200积分"
        title="15元洗车卷"
        thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        origin-price="15.00"
      /> -->

      <div style="margin-top: 25px">
        <van-row>
          <van-col span="2" style="margin-left: 6px">
            <van-image
              width="100"
              height="100"
              radius="5px"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          /></van-col>

          <van-col span="18" style="margin-left: 3px"
            ><div style="margin-left: -18%">15元洗车卷</div>
            <div style="height: 57px"></div>
            <span
              style="
                font-size: 22px;
                margin-left: 6%;
                color: red;
                font-weight: bold;
              "
              >200</span
            >
            <span style="font-size: 16px; margin-left: 1%; color: red"
              >积分</span
            >
            <span
              style="
                margin-left: 6%;
                color: gray;
                text-decoration: line-through;
              "
              >￥15.00</span
            ></van-col
          >
          <van-col span="2" style="margin-right: 1px"
            ><div style="height: 80px"></div>
            x1
          </van-col>
        </van-row>
      </div>

      <!-- 分割线 -->
      <div
        style="background-color: #dadce0; height: 8px; margin-top: 20px"
      ></div>

      <!-- 运费 -->
      <van-row>
        <van-col
          style="
            text-align: left;
            font-size: 20px;
            padding: 10px 16px;
            width: 30%;
            font-weight: bold;
          "
          >运费</van-col
        >
        <van-col
          class="yunfei"
          @click="show = true"
          style="
            text-align: right;
            padding: 10px 16px;
            width: 70%;
            font-weight: bold;
          "
          >￥0<van-icon name="arrow"
        /></van-col>
      </van-row>

      <!-- 运费弹框 -->
      <van-action-sheet v-model="show" title="运费说明">
        <div class="content">免运费，部分地区不包邮</div>
      </van-action-sheet>

      <!-- 留言 -->
      <van-cell-group>
        <van-field
          v-model="value"
          label="留言"
          placeholder="建议留言前先与商家沟通确认"
          class="liuyan"
        />
      </van-cell-group>

      <!-- 底部 -->
      <!-- 底部标签 -->
      <!-- 门店和立即兑换 -->
      <van-tabbar style="height: 50px">
        <van-tabbar-item style="color: black">
          <span style="font-size: 20px"
            >总计：<span style="color: red; font-weight: bold; font-size: 26px"
              >200</span
            >
            <span style="color: red; font-weight: bold; font-size: 16px"
              >积分</span
            ></span
          >
        </van-tabbar-item>

        <van-tabbar-item style="background-color: #fc5531; color: white"
          ><span style="font-size: 20px" @click="goPay"
            >提交订单</span
          ></van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      show: false, //运费弹框是否显示
      value: "", //用于存储留言信息
    };
  },
  created() {},
  mounted() {},
  methods: {
    //返回上一级
    goSingleCommodity() {
      this.$router.push("/SingleCommodity");
    },

    //提交订单时，没有写收货地址，执行该方法 给出提示
    hint() {
      Toast("请先添加收获地址");
    },

    //提交订单时，有收货地址，跳转支付页面
    goPay() {
      this.$router.push("/pay");
    },
  },
  components: {},
};
</script>

<style>
.col1 {
  margin-bottom: 35px;
}
.yunfei,
.liuyan {
  font-size: 20px;
}
.content {
  padding: 16px 16px 160px;
  text-align: left;
}

.second {
  background-color: #fafafa;
}

/* 导航栏css */
.van-nav-bar__title {
  font-size: 25px;
  font-weight: bold;
  margin-top: 20px;
}
/* 留言css */
.van-field__control {
  font-size: 16px;
}

/* 商品卡片css */
.van-card__price-integer {
  color: red;
  font-weight: bold;
  font-size: 22px;
}
.van-card__price-currency {
  content: null;
}
.van-card__origin-price {
  font-size: 18px;
  margin-left: 5%;
}
</style>
